<template>
    <div>
        <!-- <van-sticky> -->
            <myHead title="电影" :show="true"></myHead>
            <mySearch></mySearch>
        <!-- </van-sticky> -->
        <div class="m-banner">
            <van-swipe  class="m-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item  v-for="(l,i) in banner " :key="i" @click="gotofilmdetail(l)">
                    <!-- <img :src="banner[0].imgUrl" alt=""> -->
                    <van-image class="m-img" :src="l.imgUrl" ></van-image>
                </van-swipe-item>
            </van-swipe>
            <p class="m-city" v-if="cityinfo" @click="gotocity()">
                <span class="van-ellipsis"> {{cityinfo.name}} </span>
                <van-icon name="arrow-down" size="12"/>
            </p>
        </div>
        <div >
            <van-tabs sticky swipeable v-model="type">
            <van-tab title="正在热映" ref="tabone" name="1" @click="console.log('111')">
                <newList ref="listone" :refreshdata="refreshdata" :loadmore="loadmore" >
                        <myList  :films="films"></myList>
                </newList>
            </van-tab>
            <van-tab title="即将上映" ref="tabone" name="2" @click="console.log('222')">
                <newList ref="listone" :refreshdata="refreshdata" :loadmore="loadmore" >
                        <myList  :films="films"></myList>
                </newList>
            </van-tab>
        </van-tabs>
        </div>
    </div>
</template>
<script>
import {Dialog} from 'vant'
export default {
    data(){
        return{
            banner:[],
            list:[],
            type:"1",
            page:1,
            pageSize:10,
            films:[],
            total:0
        }
    },
    watch:{
        type(v){
            this.page=1
            // console.log(this.page);
            this.$refs.listone.finished = false;
            this.$refs.listone.loading = false;
            this.$ajax.getmaizuodata({
            type:this.type,
            pageNum:this.page,
            pageSize:this.pageSize,
            cityId:this.cityinfo.cityId?this.cityinfo.cityId:'110100',
        },{
            'X-Host': 'mall.film-ticket.film.list'
        })
        .then(res=>{
            if(res.code==200){
                this.films = res.result.data.films;
                this.total = res.result.data.total;
            }
        })
        }
    },
    methods:{
        gotofilmdetail(l){
            this.$router.push({name:'film',params:{filmId:JSON.parse(l.actionData).businessId}})
        },
        gotocity(){
            this.$router.push({name:'city',query:{name:this.cityinfo.name}})
        },
        refreshdata(callback){
                this.page=1;
                this.$ajax.getmaizuodata({
                type:this.type,
                pageNum:this.page,
                pageSize:this.pageSize,
                cityId:this.cityinfo.cityId?this.cityinfo.cityId:'110100',
            },{
                'X-Host': 'mall.film-ticket.film.list'
            })
            .then(res=>{
                if(res.code==200){
                    this.films = res.result.data.films;
                    this.total = res.result.data.total;
                }
            })
            callback()
        },
        loadmore(cb,cball){
            this.page++;
            if(this.page>Math.ceil(this.total/this.pageSize)){
                cball()
            }else{
                
                this.$ajax.getmaizuodata({
                    type:this.type,
                    pageNum:this.page,
                    pageSize:this.pageSize,
                    cityId:this.cityinfo.cityId,
                },{
                    'X-Host': 'mall.film-ticket.film.list'
                })
                .then(res=>{
                    if(res.code==200){
                        this.films = this.films.concat(res.result.data.films);
                        this.total = res.result.data.total;
                    }
                cb()
                })
            }
        }
    },
    name:'cinema',
    created(){
        console.log(this.cityinfo);
         if(!this.cityinfo){
             Dialog.alert({
                 title: '未定位',
                message: '请手动定位当前城市',
            }).then(() => {
                this.$router.push({name:'city'})
                // on close
            });
        }else{
        }
    },
    mounted(){
        this.$ajax.getmaizuodata({
            type:2,
            cityId:this.cityinfo.cityId,
        },{
            'X-Host': 'mall.cfg.common-banner'
        })
        .then(res=>{
            if(res.code==200){
                this.banner = res.result.data
                // console.log(this.banner);
            }
        })
        
        this.$ajax.getmaizuodata({
            type:this.type,
            pageNum:this.page,
            pageSize:this.pageSize,
            cityId:this.cityinfo.cityId,
        },{
            'X-Host': 'mall.film-ticket.film.list'
        })
        .then(res=>{
            if(res.code==200){
                this.films = res.result.data.films;
                this.total = res.result.data.total;
            }
        })
    }
}
</script>
<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .m-img,.my-swipe,.m-banner{
      width: 100%;
      height: 200px;
      min-height: 200px;
      position: relative;
  }
  .m-city{
      position: absolute;
      text-align: center;
      padding: 0 5px;
      display: flex;
      align-items: center;
      height: 26px;
      top: 5px;
      left: 5px;
      border: 1px solid #fff;
      border-radius: 13px;
      color: #fff;
      font-size: 14px;
  }
</style>